import React, { Component } from "react";

import { Button, Card, Form, Input, Message } from "element-react";
import "./registe.css";
import "element-theme-default";
import { desEncrypt } from "../assets/js/utils.js";
import { registe } from "../assets/js/http.js";
class Registe extends Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {
        username: "",
        password: "",
        email: "",
        phone: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        email: [
          { required: true, message: "请输入email", trigger: "blur" },

          {
            validator: (rule, value, callback) => {
              let reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
              if (value === "") {
                callback(new Error("请输入email"));
              } else if (!reg.test(value)) {
                callback(new Error("请输入正确的格式"));
              } else {
                callback();
              }
            },
          },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              let reg = /^1[3456789]\d{9}$/;
              if (value === "") {
                callback(new Error("请输入手机号"));
              } else if (!reg.test(value)) {
                callback(new Error("请输入正确的格式"));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  }
  // 表单绑定
  onchange(key, value) {
    this.setState({
      form: Object.assign({}, this.state.form, { [key]: value }),
    });
  }
  componentWillMount() {
    this.setState({
      form: {
        username: "",
        password: "",
        email: "",
        phone: "",
      },
    });
  }
  // 返回登录
  goLogin() {
    this.props.history.go(-1);
  }
  // 注册
  async registe() {
    let obj = JSON.parse(JSON.stringify(this.state.form));
    obj.password = desEncrypt(obj.password, "01234567");
    let { code, msg } = await registe(obj);
    if (code == 1) {
      Message({
        message: "恭喜你，注册成功",
        type: "success",
      });
      this.state.form = {
        username: "",
        password: "",
        email: "",
        phone: "",
      };
    } else {
      Message({
        message: msg,
        type: "warning",
      });
    }
  }
  // 注册前验证
  async goRegiste() {
    this.registe();
    return;
    this.refs.form.validate((valid) => {
      if (valid) {
        this.registe();
      } else {
        console.log("error submit!!");
        return false;
      }
    });
  }

  render() {
    return (
      <div className="login">
        <div className="login_inner">
          <Card className="box-card">
            <h3 className="login_title">用户注册</h3>
            <Form
              ref="form"
              model={this.state.form}
              rules={this.state.rules}
              labelWidth="70"
              className="demo-ruleForm"
            >
              <Form.Item label="用户名" prop="username">
                <Input
                  value={this.state.form.username}
                  onChange={this.onchange.bind(this, "username")}
                ></Input>
              </Form.Item>
              <Form.Item label="密码" prop="password">
                <Input
                  type="password"
                  value={this.state.form.password}
                  onChange={this.onchange.bind(this, "password")}
                ></Input>
              </Form.Item>

              <Form.Item label="Email" prop="email">
                <Input
                  type="text"
                  value={this.state.form.email}
                  onChange={this.onchange.bind(this, "email")}
                ></Input>
              </Form.Item>
              <Form.Item label="手机号" prop="phone">
                <Input
                  prepend="+86"
                  type="text"
                  value={this.state.form.phone}
                  onChange={this.onchange.bind(this, "phone")}
                ></Input>
              </Form.Item>

              <Form.Item labelWidth="0">
                <Button
                  type="primary"
                  className="wd-80"
                  onClick={this.goRegiste.bind(this)}
                >
                  确认并注册
                </Button>
              </Form.Item>
              <Form.Item labelWidth="0">
                <Button
                  type="text"
                  className="wd-80"
                  onClick={this.goLogin.bind(this)}
                >
                  返回登录
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    );
  }
}
export default Registe;
